<template>
  <div class="appointDriver">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="司机姓名/手机号" prop="driverName">
        <el-input v-model="ruleForm.driverName" placeholder="请输入司机名或手机号"></el-input>
      </el-form-item>
      <el-form-item label="司机列表" prop="driver_id" v-if="driverList.length > 0">
        <el-select v-model="ruleForm.driver_id" placeholder="请选择司机" @change="driverChange">
            <el-option
            v-for="(item, index) in driverList"
            :key="index"
            :label="`${item.user_name}(${item.tel})`" :value="item.driver_id">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆" prop="car_id" v-if="carList.length > 0">
        <el-radio-group v-model="ruleForm.car_id">
            <el-radio 
            v-for="(item,index) in carList"
            :key="index"
            :label="item.car_id"
            >{{ item.cph }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发货重量" prop="kg">
        <el-input type="number" v-model="ruleForm.kg" placeholder="请输入发货重量"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="()=>$emit('closeDialog')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getOwnerDriverList,
  getOwnerCarList,
  assignDriverBill
} from "@/api/childCompany/waybill";
export default {
  name: "appointDriver",
  props: ["driverRow"],
  data() {
    var checkDriverName = async (rule, value, callback) => {
        if (!value) {
          return callback(new Error('内容不能为空'));
        }
        let result = await getOwnerDriverList({
            keyWord: value
        });
        if(result.code == 200){
            if(result.data.length == 0){
                return callback(new Error('无此司机'));
            }else{
                this.driverList = result.data;
            callback();

            }
        }else{
            callback(new Error('数据异常'));
        }

      };
    return {
      driverList:[],
      carList:[],
      driverName:'',
      ruleForm: {
        add_id: 0,
        kg: "",
        car_id: "",
        driver_id: "",
        driverName:'',
      },
      rules: {
        kg: [{ required: true, message: "请输入发货重量", trigger: "blur" }],
        driverName: [
          { required: true,validator: checkDriverName, trigger: "blur" }
        ],
        driver_id: [
          { required: true, message: "请选择司机", trigger: "change" }
        ],
        
        car_id: [
          { required: true, message: "请选择车辆", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    console.log("运单信息", this.driverRow);
    this.initial();
  },
  methods: {
    async initial() {
        // let result = await getOwnerDriverList();
        // if (result.code == 200) {
        //     this.driverList = result.data;
        //     // console.log("this.driverList",this.driverList)
        // }
    },
   async driverChange(val){
        //通过新的司机id或者车辆信息
        let result = await getOwnerCarList({
            driver_id:val
        });
        if (result.code == 200) {
            this.carList = result.data;
            //有车辆数据后默认选中第一个车辆
            if(this.carList.length > 0){
                this.ruleForm.car_id = this.carList[0].car_id;              
            }else{
              this.$message.error('无车辆信息');
            }
        }else{
            this.ruleForm.car_id = '';
        }
        
    },
    submitForm(formName) {
      if(!this.ruleForm.driver_id){
        this.$message.error('请选择司机');
        return;
      }
      if(!this.ruleForm.car_id){
        this.$message.error('该司机暂无车辆信息,请更换司机');
        return;
      }
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.ruleForm.add_id = this.driverRow.id;
            delete this.ruleForm.driverName;
            let result = await assignDriverBill(this.ruleForm);
            if(result.code == 200){
                this.$message.success('指派成功');
                this.$emit('closeDialog');
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  }
};
</script>

<style lang="scss" scoped>
.appointDriver {
}
</style>
